<script lang="ts">
import { defineComponent } from 'vue'
import { SettingConfig, Theme, Translate ,SunOne,Moon} from '@icon-park/vue-next'

import { appSettingStore } from '../store/appSetting'
import { getDarkColor, getLightColor } from '../utils/color'

export default defineComponent({
  name: 'appSetting',
  components: { Theme, SettingConfig, Translate,SunOne,Moon },
  data() {
    return {
      show: false,
      form: {},
      predefineColors: ['#409EFF', '#C70019', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'],
      appSetting: null
    }
  },
  methods: {
    handleOpen() {
      if (!this.appSetting) {
        this.appSetting = appSettingStore()
      }
      this.form.locale = this.appSetting.locale
      this.form.themeColor = this.appSetting.themeColor
      this.form.isDark = this.appSetting.dark
      this.show = true
    },
    submit() {
      this.appSetting.setThemeColor(this.form.themeColor)
      this.appSetting.setLocale(this.form.locale)
      this.appSetting.setDark(this.form.isDark)
      this.initLocale()
      this.initTheme()
      this.show=false
    },
    // 初始化语言
    initLocale() {
      switch (this.appSetting.locale || navigator.language) {
        case "en-US":
          this.$i18n.locale = "en-US";
          break;
        default:
          this.$i18n.locale = "简体中文";
          break;
      }
    },
    // 初始化主题
    initTheme() {
      document.documentElement.style.setProperty("--el-color-primary", this.appSetting.themeColor);
      if(this.appSetting.dark){
        document.documentElement.classList.add('dark')
      }else{
        document.documentElement.classList.remove('dark')
      }
      for (let i = 1; i <= 9; i++) {
        document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(this.appSetting.themeColor, i / 10)}`);
      }
      for (let i = 1; i <= 9; i++) {
        document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, `${getDarkColor(this.appSetting.themeColor, i / 10)}`);
      }
    }
  }
})
</script>

<template>
  <el-button @click="handleOpen" link>
    <setting-config theme="filled" size="16" />
  </el-button>
  <el-dialog @close="show=false" :model-value="show" :width="500" :lock-scroll="false">
    <el-form :model="form" style="padding: 20px 20px" label-width="75">
      <el-form-item label="语言">
        <template #label>
          <div>
            <translate theme="filled" />
            <span style="margin-left: 4px">语言</span></div>
        </template>
        <el-select v-model="form.locale">
          <el-option v-for="item in $i18n.availableLocales" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主题色">
        <template #label>
          <div>
            <theme theme="filled" />
            <span style="margin-left: 4px">主题</span></div>
        </template>
        <el-switch v-model="form.isDark" style="margin-right: 10px" :active-text="'夜间模式'">
          <template #active-action>
            <moon></moon>
          </template>
          <template #inactive-action>
            <sun-one></sun-one>
          </template>
        </el-switch>
        <el-color-picker v-model="form.themeColor" :predefine="predefineColors"></el-color-picker>

      </el-form-item>
    </el-form>
    <template #footer>
      <el-space>
        <el-button @click="submit" type="primary">{{ $t('button.ok') }}</el-button>
        <el-button @click="show=false">{{ $t('button.cancel') }}</el-button>
      </el-space>
    </template>
  </el-dialog>
</template>

<style scoped lang="less">

</style>
